<template>
    <div id="comItem">
        <h1>歌单介绍</h1>

        <section>
            <template v-for="(item, index) in songDate">
                <router-link :key="index" :to="`/play/${item.id}`">
                    <span
                        v-if="isShowIndex"
                        :class="{ 'red': index < 3 }"
                    >{{ String(index + 1).padStart(2, 0) }}</span>
                    <div>
                        <p>{{ item.name }}</p>
                        <div>
                            <span>sq</span>
                            <p>{{ item.ablunName }}--{{ item.authorNmae }}</p>
                        </div>
                    </div>
                    <div>
                        <i class="iconfont icon-bofangqi-bofangshu"></i>
                    </div>
                </router-link>
            </template>
        </section>
    </div>
</template>

<script>
export default {
    props: ['songDate', 'isShowIndex'],


}
</script>

<style lang="scss" >
@import "../assets/scss/vw";
#comItem {
    h1 {
        height: _vw(150);
        text-align: center;
        line-height: _vw(150);
        background-color: aqua;
    }
    section {
        .red {
            color: red;
        }
        a {
            display: flex;
            width: 100%;
            height: _vw(55);
            align-items: center;
            > span {
                color: #999;
                width: _vw(40);
                text-align: center;
                font-size: _vw(18);
            }
            > div {
                flex-grow: 1;
                > p {
                    font-size: _vw(17);
                    color: #000;
                }
                div {
                    display: flex;
                    justify-content: flex-start;
                    span {
                        font-size: _vw(12);
                        color: #f00;
                        border: 1px solid red;
                        transform: scale(0.8);
                        margin-right: _vw(4);
                    }
                    p {
                        font-size: _vw(12);
                        color: #888;
                    }
                }
            }
            i {
                width: _vw(22);
                font-size: _vw(20);
                color: #ccc;
            }
        }
    }
}
</style>